<template>
	<view class="content">
		<z-paging @scroll="scroll" :scrollable="scrollable" :show-console-error="false"
			:scroll-to-top-bounce-enabled="false" :auto-clean-list-when-reload="false" :refresher-enabled="false"
			:fixed="false" ref="paging" @query="queryList" v-model="dataList" :mounted-auto-call-reload="false"
			style="height: 100%;">
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view>
				<block class="item" v-for="(item,index) in dataList" :key="index">
					<index-card :item="item"></index-card>
				</block>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getIndexList
	} from '@/api/index';
	import indexCard from '@/components/indexCard/indexCard.vue'
	import noData from '@/components/noData/noData.vue';
	export default {
		components: {
			indexCard,
			noData
		},
		data() {
			return {
				dataList: this.data,
				firstLoaded: true,
				height: 0,
				scrollable: true,
				completeFunc: null,
				scrollCallback: null,

			}
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			data: {
				type: Array,
			},
			filter: {
				type: Object,
			}
		},

		watch: {
			data(val) {
				console.log('this.data', val);
				this.dataList = val;
			},
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							// #ifdef MP-TOUTIAO
							setTimeout(() => {
								this.$refs.paging.reload();
							}, 10)
							// #endif
							// #ifndef MP-TOUTIAO
							this.$nextTick(() => {
								this.$refs.paging.reload();
							})
							// #endif
						}
					}
				},
				immediate: true
			},
			// filter: {
			// 	handler(newVal) {
			// 		setTimeout(() => {
			// 			this.$refs.paging.reload();
			// 		}, 5);
			// 	},
			// 	immediate: true
			// }
		},
		methods: {
			async queryList(page, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const postData = {
					page,
					pageSize,
					// ...this.filter,
					category_id: this.currentIndex,
				}
				const res = await getIndexList(postData);
				this.$refs.paging.complete(res.data.list);
				this.firstLoaded = true;
				if (this.completeFunc) {
					this.completeFunc();
				}
			},
			scroll(e) {
				if (this.scrollCallback) {
					this.scrollCallback(e.detail.scrollTop);
				}
			},
			reload(completeFunc) {
				this.completeFunc = completeFunc;
				this.$refs.paging.reload();
			},
			itemClick(item) {
				console.log('点击了', item.title);
			},
			updateScrollEnable(scrollable) {
				this.scrollable = scrollable;
			},
			setScrollCallback(callback) {
				this.scrollCallback = callback;
			}
		}
	}
</script>

<style>
	/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
	/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
	.content {
		height: 100%;
		/* 父节点建议开启flex布局 */
		display: flex;
		flex-direction: column;
	}
</style>
